<template>
    <view class="tab-bar">
        <view class="state-tab">
            <text
                class="btn"
                v-for="(item, index) in tabs"
                :key="index"
                :class="{ 'btn-yellow': tabIndex == index }"
                @click="clickTab(item, index)"
                >{{ item.title }}</text
            >
        </view>
        <view class="date btn btn-gray-fill">
            <picker :range="years" @change="timeFn" @columnchange="columnchange" mode="multiSelector">
                <view class="btn-scope">
                    <text v-if="yearsIndex1 == 0">{{ years[0][yearsIndex1] }}</text>
                    <text v-else>{{ years[0][yearsIndex1] }}{{ years[1][yearsIndex2] }}</text>
                    <uni-icons type="arrowdown"></uni-icons>
                </view>
            </picker>
        </view>
    </view>
</template>

<script>
function getDate() {
    const date = new Date()
    let year = date.getFullYear()
    return `${year}`
}
export default {
    props: ["tabIndex", "tabs"],
    data() {
        return {
            date: "全部",
            startDate: getDate("start"),
            endDate: getDate("end"),
            years: [
                [
                    "全部",
                    getDate() + "年",
                    getDate() - 1 + "年",
                    getDate() - 2 + "年",
                    getDate() - 3 + "年",
                    getDate() - 4 + "年",
                ],
                ["全部"],
            ],
            yearsIndex1: 0,
            yearsIndex2: 0,
        }
    },
    mounted() {},
    methods: {
        clickTab(item, index) {
            this.$emit("clickTab", index)
        },

        timeFn: function (e) {
            //获得对象的 detail的 value
            //通过数组的下标改变显示在页面的值
            this.yearsIndex1 = e.detail.value[0]
            this.yearsIndex2 = e.detail.value[1]
            let dayVal
            if (this.yearsIndex1 == 0) {
                dayVal = ""
                this.$emit("timeFn", dayVal, dayVal)
            } else {
                let str = this.years[0][this.yearsIndex1]
                let str1 = this.years[1][this.yearsIndex2]
                let newstr = str.slice(0, str.length - 1) //年
                let newstr1 = str1.slice(0, str1.length - 1) //月
                var date = new Date(newstr, newstr1 - 1) //0 表示1月
                date.setDate(28)
                date.setMonth(date.getMonth() + 1)
                // 日期设置为0号, 0表示1号的前一天
                let lastDay = date.setDate(0)

                var formatDate = function (d) {
                    var now = new Date(d)
                    var year = now.getFullYear()
                    var month = now.getMonth() + 1
                    var date = now.getDate()
                    var hour = now.getHours()
                    var minute = now.getMinutes()
                    var second = now.getSeconds()
                    if (month < 10) {
                        month = "0" + month
                    }
                    return year + "-" + month + "-" + date
                }
                if (newstr1 < 10) {
                    newstr1 = "0" + newstr1
                }
                let startTime = newstr + "-" + newstr1 + "-01"
                let startEnd = formatDate(lastDay)
                this.$emit("timeFn", startTime, startEnd)
            }
        },
        columnchange(e) {
            if (e.detail.column == 0 && e.detail.value == 0) {
                this.years = [
                    [
                        "全部",
                        getDate() + "年",
                        getDate() - 1 + "年",
                        getDate() - 2 + "年",
                        getDate() - 3 + "年",
                        getDate() - 4 + "年",
                    ],
                    ["全部"],
                ]
            } else {
                this.years = [
                    [
                        "全部",
                        getDate() + "年",
                        getDate() - 1 + "年",
                        getDate() - 2 + "年",
                        getDate() - 3 + "年",
                        getDate() - 4 + "年",
                    ],
                    [
                        1 + "月",
                        2 + "月",
                        3 + "月",
                        4 + "月",
                        5 + "月",
                        6 + "月",
                        7 + "月",
                        8 + "月",
                        9 + "月",
                        10 + "月",
                        11 + "月",
                        12 + "月",
                    ],
                ]
            }
        },
        bindDateChange: function (e) {
            this.date = e.detail.value
        },
    },
}
</script>

<style lang="scss">
.tab-bar {
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    .state-tab {
        flex: 1;
        display: flex;
        flex-direction: row;

        .btn {
            height: 42rpx;
            padding: 0 22rpx;
            border-radius: 21rpx;
        }
    }

    .date {
        display: flex;
        flex-direction: row;
        min-width: 200rpx;

        .date-value {
            display: flex;
            flex: 1;
            justify-content: center;
            margin-right: 20rpx;
        }
    }
    .btn-gray-fill {
        background: #ebebeb;
        padding: 0 10rpx;
        min-width: 160rpx;
    }
    .btn-scope {
        min-width: 160rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
